import { Avatar, Button, Flex, HoverCard, HoverCardContent, HoverCardTrigger, Strong } from "@radix-ui/themes"
import Link from 'next-intl/link';
import { useMemo } from "react";
import { ExitIcon, GearIcon, FilePlusIcon, EnvelopeClosedIcon, CheckboxIcon } from '@radix-ui/react-icons';
import { useQuery } from "@apollo/client";
import viewer from "@/queries/viewer.gql"
const UserButton = () => {
    const { data } = useQuery(viewer);
    const menu = useMemo(() => {
        return [{
            name: "设置",
            href: "/profile",
            icon: <GearIcon />
        }, {
            name: "我的班级",
            href: "/classes"
        }, {
            name: "退出登录",
            href: "/auth/logout",
            icon: <ExitIcon />
        }]
    }, [])
    if (!data) {
        return (
            <Link href="/auth">
                <Button className="cursor-pointer">
                    注册或登录
                </Button>
            </Link>
        )
    }
    return (
        <Flex gap='2'>
            <HoverCard.Root>
                <HoverCardTrigger>
                    <Flex justify="center" align="center">
                        <Link href="/home/group">
                            <EnvelopeClosedIcon className="cursor-pointer" width={24} height={24} />
                        </Link>
                    </Flex>
                </HoverCardTrigger>
                <HoverCardContent>
                    <div className="w-32 text-center">
                        <div className="mt-2 mb-1">
                            <Link href="/home/group">
                                我加入的群组
                            </Link>
                        </div>
                        <div className="mt-2 mb-1">
                            <Link href="/home/group/admin">
                                我管理的群组
                            </Link>
                        </div>
                        <div className="mt-2 mb-1">
                            <Link href="/home/group/mine">
                                我创建的群组
                            </Link>
                        </div>
                    </div>
                </HoverCardContent>
                <HoverCard.Root>
                    <HoverCard.Trigger>
                        <Link href="/home">
                            <Avatar
                                fallback="U"
                            />
                        </Link>
                    </HoverCard.Trigger>
                    <HoverCard.Content>
                        <div className="w-60">
                            <Flex gap='2' align="center">
                                <Avatar
                                    fallback="U"
                                />
                                <Strong>
                                    helloWorld
                                </Strong>
                            </Flex>
                            <div className="mt-2 mb-1">
                                <Link href="/create">
                                    <Flex gap='2' align="center">
                                        <FilePlusIcon width={40} height={40} color="#3f51bf" fontSize={40} />
                                        创作
                                    </Flex>
                                </Link>
                            </div>
                            <div className="mt-2 mb-1">
                                <Link href="/dynamic/home">
                                    <Flex gap='2' align="center">
                                        <CheckboxIcon width={40} height={40} color="#3f51bf" fontSize={40} />
                                        动态
                                    </Flex>
                                </Link>
                            </div>
                            {menu.map(({ name, href, icon }, key) => (
                                <Link href={href} key={key}>
                                    <Flex align="center" className="hover:bg-slate-400 p-1 rounded">
                                        <Flex align="center" justify="center" className="w-8 h-8">
                                            {icon}
                                        </Flex>
                                        <div>
                                            {name}
                                        </div>
                                    </Flex>
                                </Link>
                            ))}
                        </div>
                    </HoverCard.Content>
                </HoverCard.Root>
            </HoverCard.Root>

        </Flex>
    )
}
export default UserButton